<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加徽章</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style>
        table{
            margin-top: 40px;
        }

        table tr{
            height: 50px;
            border-bottom:1px solid pink ;
        }
    </style>
    <script>
        window.onload=function(){
            var file;
            $("#badge_button").click(function () {
                var bname = $("#badge_name").val();
                var bmes = $("#badge_describe").val();
                var bprice = $("#badge_price").val();
                file = document.getElementById('badge_picture').files[0];
                var formdata = new FormData();
                formdata.append('bname',bname);
                formdata.append('file', file);
                formdata.append('bmes', bmes);
                formdata.append('bprice',bprice);
                console.log(formdata.get("file"));
                if (file != null) {
                    //ajax上传
                    $.ajax({
                        async: false,
                        type: 'Post',
                        url: "addBadge.do",
                        dataType: 'json',
                        data: formdata,
                        contentType: false,//ajax上传图片需要添加
                        processData: false,//ajax上传图片需要添加
                        success: function (back) {
                            if(back==1){
                                $("#yes").css('display','block')
                            }
                        }
                    })
                }
            })
        }
    </script>
</head>
<body>
    <table align="center">
        <tr>
            <td><label>徽章名称</label></td>
            <td><input type="text" id="badge_name"></td>
        </tr>
        <tr>
            <td><label>图片地址</label></td>
            <td><input type="file" class="file" accept="image/gif,image/jpeg, image/png, image/jpg" id="badge_picture"
                       value="上传徽章"></td>
        </tr>
        <tr>
            <td><label>徽章说明</label></td>
            <td><input type="text" id="badge_describe"></td>
        </tr>
        <tr>
            <td><label>徽章价格</label></td>
            <td><input type="text" id="badge_price"></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" id="badge_button" value="添加徽章">
                <label style="display: none" id="yes">添加成功！</label>
            </td>
        </tr>
    </table>
</body>
</html>